﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HuseData.Web._Default" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>上海房价图</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="build/esl/esl.js"></script>
</head>

<body>
    <br /><center>上海房价图  <a href="?">日线</a>  <a href="?datetype=Week">周线</a>  <a href="?datetype=month">月线</a></center><br />
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="width:100%;height:500px;border:1px solid #ccc"></div>
    <br />
    <center>数据来源:<a href="http://www.fangdi.com.cn/CircleChartselect.asp" target="_blank">http://www.fangdi.com.cn/</a></center>
    <script type="text/javascript">
        // Step:3 conifg ECharts's path, link to echarts.js from current page.
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
        require.config({
            paths: {
                echarts: 'build/echarts'
            }
        });

        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用
        require(
        ['echarts'],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [<%=tabTitle %>]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: true,
                        dataView: { readOnly: false },
                        magicType: ['line', 'bar'],
                        restore: true,
                        saveAsImage: true
                    }
                },
                calculable: true,
                dataZoom: {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [<%=title %>]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: [
                    <%=data %>
                ]
            };

            myChart.setOption(option);
        }
    );
    </script>
</body>
</html>